<template>
  <h1>count is: {{ $store.state.count }}</h1>
  <el-button type="primary" @click="handleClick">+1</el-button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <form>
    <el-select v-model="locale" @change="handleChange">
      <el-option value="zh-CN">zh-CN</el-option>
      <el-option value="zh-HK">zh-HK</el-option>
    </el-select>
  </form>
  <p>{{ t.hello }}</p>
  <el-button type="primary" @click="toHome">+1</el-button>

</template>

<script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue'

export default {
  setup() {
    const store = useStore()

    const router = useRouter();
    const { currentRoute } = router;

    const locale = ref('zh-CN')

    const handleClick = () => {
      store.commit("setValue", {
        key: 'count',
        value: 2
      })
    }

    const handleChange = (value) => {
      store.commit("setValue", {
        key: 'lang',
        value
      })
    }

    const toHome = () => {
      currentRoute.push('/home')
    }

    const lang = reactive({
      'zh-CN': {
        hello: '你好，CN',
      },
      'zh-HK': {
        hello: '你好，HK',
      }
    })

    return { locale, handleClick, handleChange, toHome, lang }
  },
  name: 'HelloWorld',
}
</script>
